<template>
    <div class="form-input" style="text-align: left;margin-left: 10px;width: 300px">
        <form class="ui form" @submit="submitForm">
            <div class="field">
                <label>New Item</label>
                <input v-model="formData.newItem" type="text" placeholder="Add an item!"/>
                <span style="float: right">{{formData.newItem.length}}/20</span>
                <span style="color:red">{{fieldErrors.newItem}}</span>
                <span v-if="isNewItemInputLimitExceeded" style="color: red;display: block">
                    Must be under twenty characters
                </span>
            </div>
            <div class="field">
                <label>Email</label>
                <input v-model="formData.email" type="text" placeholder="What`s your email?"/>
                <span style="color:red">{{fieldErrors.email}}</span>
            </div>
            <div class="field">
                <label>Urgency</label>
                <select v-model="formData.urgency" class="ui fluid search dropdown">
                    <option disabled value="">Please select one</option>
                    <option>Nonessential</option>
                    <option>Moderate</option>
                    <option>Urgency</option>
                </select>
                <span style="color:red">{{fieldErrors.urgency}}</span>
                <span v-if="isNotUrgent" style="color: red;display: block">
                    Must be moderate to urgent
                </span>
            </div>
            <div class="field">
                <div class="ui checkbox">
                    <input v-model="formData.termsAndConditions" type="checkbox"/>
                    <label>I accept the terms and conditions</label>
                    <span style="color: red">{{fieldErrors.termsAndConditions}}</span>
                </div>
            </div>
            <button v-if="this.saveStatus === 'SAVING'" disabled class="ui button">Saving...</button>
            <button v-if="this.saveStatus === 'SUCCESS'" class="ui button"
                    :disabled="isNewItemInputLimitExceeded || isNotUrgent">
                Saved! Submit another
            </button>
            <button v-if="this.saveStatus === 'ERROR'"
                    :disabled="isNewItemInputLimitExceeded || isNotUrgent"
                    class="ui button">
                Save Failed - Retry?
            </button>
            <button v-if="saveStatus === 'READY'"
                    :disabled="isNewItemInputLimitExceeded || isNotUrgent"
                    class="ui button">
                Submit
            </button>
        </form>
        <div class="ui segment">
            <h4 class="ui header">Items</h4>
            <ul style="text-align: left">
                <div v-if="loading" class="ui active inline loader"></div>
                <li v-for="item in items" class="item" :key="item">{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { FormData } from '@/model/FormData'
import { apiClient } from '@/util/apiClient'

@Component({})
export default class BaseComponent02 extends Vue {
    name = 'BaseComponent02';
    formData = new FormData("","","");
    fieldErrors = {
        newItem:undefined,
        email:undefined,
        urgency:undefined,
        termsAndConditions:undefined
    }
    items:any = [];
    loading = false;
    saveStatus = "READY";

    private submitForm(evt:any){
        evt.preventDefault();
        this.fieldErrors = this.validateForm(this.formData);
        if(Object.keys(this.fieldErrors).length){
            return;
        }
        const items = [...this.items,this.formData.newItem];
        this.saveStatus = "SAVING";
        this.loading = true;
        apiClient.saveItems(items).then(() =>{
            this.items = items;
            this.formData.newItem = "";
            this.formData.email = "";
            this.formData.urgency = "";
            this.formData.termsAndConditions = false;
            this.saveStatus = "SUCCESS"
            this.loading = false;
        }).catch((error) =>{
            console.log(error);
            this.saveStatus = "ERROR";
            this.loading = false;
        });

    }
    private validateForm(fields:any){
        const errors:any = {};
        if(!fields.newItem){
            errors.newItem = "New Item Required";
        }
        if(!fields.email){
            errors.email = "Email Required";
        }
        if(!fields.urgency){
            errors.urgency = "Urgency Required";
        }
        if(!fields.termsAndConditions){
            errors.termsAndConditions = "Terms and conditions have to be approved";
        }
        if(fields.email && !this.isEmail(fields.email)){
            errors.email = "Invalid Email";
        }
        return errors;
    }

    created(){
        this.loading = true;
        apiClient.loadItems().then((items:any) =>{
            this.items = items;
            this.loading = false;
        })
    }
    private isEmail(email:string):boolean{
        const re = /\S+@\S+\.\S+/;
        return re.test(email);
    }

    private get isNewItemInputLimitExceeded(){
        return this.formData.newItem.length >= 20;
    }

    private get isNotUrgent(){
        return this.formData.urgency == "Nonessential";
    }
}
</script>

<style scoped>

</style>
